﻿<!DOCTYPE html>
<html ng-app="registrationForm">
<head>
    <title>Enrollment</title>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/Enroll.css" />

    <script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/angular.min.js"></script>
    <script type="text/javascript" src="../js/registration.js"></script>
    <script type="text/javascript" src="../js/helper.js"></script>
    <script type="text/javascript" src="../js/jquery-2.1.4.js"></script>
    <script type="text/javascript" src="../js/moment-with-locales.js"></script>
    <script type="text/javascript" src="../js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/models.js"></script>
    <script type="text/javascript">

        $(document).ready(
            function () {
                openDatePicker();
            }
        )

        function openDatePicker() {
            $(function () {
                $('#birthDate').datetimepicker({
                    format: 'MM/DD/YYYY'
                });
            });
        }

    </script>
    <style type="text/css">
        .form-group {
            margin-bottom: 0;
        }
    </style>
</head>
<body>
    <header style="height: 19px;">
        <div id="new-header-SubMenu" class="fixed">
            <script>
                $("#new-header-SubMenu").load("SubMenu.html");
            </script>
        </div>
    </header>
    <div ng-controller="RegistrationController">
        <header style="margin-top: 55px;">
            <h3 class="text-center">{{ this.Title }}</h3>
        </header>
        <div ng-show="error" class="alert alert-danger alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <p>{{ error }}</p>
        </div>
        <div id="DivRegistration" ng-show="RegistrationForms" class="content-top-margin-fixed">
            <div style="width: 100%;">
                <div style="margin-left: 10px; float: left;"><a href="javascript:;" ng-click="RegistrationForms_ConfirmOldNew()">New Registration</a></div>
                <div style="margin-right: 10px; float: right;"><a href="javascript:;" data-ng-click="Registrations_GetAll()">Proceed to Enrollment>></a></div>
            </div>
            <table class="table">
                <tr>
                    <th>Registration No.</th>
                    <th>Student No.</th>
                    <th>LastName</th>
                    <th>FirstName</th>
                    <th>MiddleName</th>
                    <th>Type</th>
                    <th>School Yr.</th>
                    <th>Level</th>
                    <th>Comments</th>
                    <th>Actions</th>
                </tr>
                <tr ng-repeat="RegForm in Registrations">
                    <td>{{RegForm.RegNumber}}</td>
                    <td>{{RegForm.StudentNo}}</td>
                    <td>{{RegForm.LastName}}</td>
                    <td>{{RegForm.FirstName}}</td>
                    <td>{{RegForm.MiddleName}}</td>
                    <td>{{RegForm.Type}}</td>
                    <td>{{RegForm.SchoolYear}}</td>
                    <td>{{RegForm.Level}}</td>
                    <td>{{RegForm.Comments}}</td>
                    <td>
                        <p>
                            <a data-ng-click="Registrations_Get(AppForm)" href="javascript:;">View</a> |
                            <a data-ng-click="Registrations_Edit(AppForm)" href="javascript:;">Edit</a> |
                            <a data-ng-click="Registrations_Delete(AppForm)" href="javascript:;">Delete</a>
                        </p>
                    </td>
                </tr>
            </table>
            <div class="container">
                <!-- Modal -->
                <div class="modal fade" id="regFormModal" role="dialog" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <!-- Modal content-->
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
                                <h4 class="modal-title" style="color: blue">
                                    <label id="lblModalheader">Registration Information</label>
                                </h4>
                            </div>
                            <div id="errorDialog" ng-show="AppForm.error" class="alert alert-danger alert-dismissible" role="alert">
                                <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                <p>{{ AppForm.error }}</p>
                            </div>
                            <div class="modal-body" style="padding-top: 5px;">
                                <ul class="nav nav-tabs" id="tabContent">
                                    <li class="active"><a href="#personal" data-toggle="tab">Personal Data</a></li>
                                    <li><a href="#address" data-toggle="tab">Address</a></li>
                                    <li><a href="#parents" data-toggle="tab">Parents</a></li>
                                    <li><a href="#guardian" data-toggle="tab">Guardian</a></li>
                                    <li><a href="#school" data-toggle="tab">School</a></li>
                                </ul>
                                <form class="form-horizontal" role="form" name="addform">
                                    <div class="tab-content">
                                        <div class="tab-pane active" id="personal">
                                            <div class="content-left-personal">
                                                <div class="form-group">
                                                    <label for="txtRegNo" class="col-md-3 control-label">Registration No.</label>
                                                    <div class="col-sm-7">
                                                        <input id="txtTempNo" class="form-control" maxlength="50" ng-model="AppForm.RefNumber" placeholder="Auto-generated" readonly />
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="txtLastName" class="col-md-3 control-label">Last Name</label>
                                                    <div class="col-sm-7">
                                                        <input id="txtLastName" type="text" class="form-control" maxlength="50" ng-model="AppForm.LastName" required />
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="txtFirstName" class="col-md-3 control-label">First Name</label>
                                                    <div class="col-sm-7">
                                                        <input id="txtFirstName" class="form-control" maxlength="50" ng-model="AppForm.FirstName" required />
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="txtMiddleName" class="col-md-3 control-label">Middle Name</label>
                                                    <div class="col-sm-7">
                                                        <input id="txtMiddleName" class="form-control" maxlength="50" ng-model="AppForm.MiddleName" />
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="txtBdate" class="col-md-3 control-label" style="margin-top: 0px; top: 13px;">Birth Date</label>
                                                    <div class="col-sm-7">
                                                        <div class="input-group date" id="birthDate">
                                                            <input id="txtBdate" type="datetime" class="form-control" placeholder="mm/dd/yyyy"
                                                                ng-model="AppForm.BirthDate" />
                                                            <span class="input-group-addon btn">
                                                                <span class="glyphicon glyphicon-calendar"></span>
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="txtNationality" class="col-md-3 control-label">Nationality</label>
                                                    <div class="col-sm-7">
                                                        <input id="txtNationality" class="form-control" maxlength="50" data-ng-model="AppForm.Nationality" />
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="txtMotherTongue" class="col-md-3 control-label">Mother Tongue</label>
                                                    <div class="col-sm-7">
                                                        <input id="txtMotherTongue" class="form-control" maxlength="50" data-ng-model="AppForm.MotherTongue" />
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="content-right-personal">
                                                <div class="form-group" ng-class="{ 'has-error': addform.LRN.$invalid && addform.LRN.$dirty }">
                                                    <label for="txtLRN" class="col-md-3 control-label">LRN</label>
                                                    <div class="col-sm-7">
                                                        <input id="txtLRN" name="LRN" class="form-control" maxlength="50" data-ng-model="AppForm.LRN" placeholder="LRN"
                                                            required title="Enter LRN" />
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="ddlSY" class="col-md-3 control-label">School Yr.</label>
                                                    <div class="col-sm-7">
                                                        <select id="ddlSY" runat="server" class="form-control" style="max-width: 150px; margin-top: 8px;" ng-model="AppForm.SchoolYear" required>
                                                            <option value="2015">SY2015</option>
                                                            <option value="2016">SY2016</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="ddlType" class="col-md-3 control-label">Type</label>
                                                    <div class="col-sm-7">
                                                        <select id="ddlType" class="form-control" style="max-width: 150px; margin-top: 8px;" ng-model="AppForm.Type" required>
                                                            <option value="New Student">New Student</option>
                                                            <option value="Transferee">Transferee</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="ddlLevel" class="col-md-3 control-label">Level</label>
                                                    <div class="col-sm-7">
                                                        <select id="ddlLevel" class="form-control" style="max-width: 150px; margin-top: 8px;" ng-model="AppForm.Level" ng-options="level.StudentLevel as level.StudentLevel for level in Levels.SchoolLevels">
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="ddlGender" class="col-md-3 control-label">Gender</label>
                                                    <div class="col-sm-7">
                                                        <select id="ddlGender" class="form-control" style="max-width: 150px; margin-top: 8px;" ng-model="AppForm.Gender">
                                                            <option value="Male">Male</option>
                                                            <option value="Female">Female</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="txtContactNumber" class="col-md-3 control-label">Contact Number</label>
                                                    <div class="col-sm-7">
                                                        <input id="txtContactNumber" class="form-control" maxlength="50" ng-model="AppForm.ContactNumber" />
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="ddlReligions" class="col-md-3 control-label">Religion</label>
                                                    <div class="col-sm-7">
                                                        <select id="ddlReligions" class="form-control" ng-model="AppForm.Religion" style="max-width: 150px; margin-top: 8px;">
                                                            <option value="">-- select one --</option>
                                                            <option value="African Traditional & Diasporic">African Traditional & Diasporic</option>
                                                            <option value="Agnostic">Agnostic</option>
                                                            <option value="Atheist">Atheist</option>
                                                            <option value="Baha'i">Baha'i</option>
                                                            <option value="Buddhism">Buddhism</option>
                                                            <option value="Cao Dai">Cao Dai</option>
                                                            <option value="Chinese traditional religion">Chinese traditional religion</option>
                                                            <option value="Christianity">Christianity</option>
                                                            <option value="Hinduism">Hinduism</option>
                                                            <option value="Islam">Islam</option>
                                                            <option value="Jainism">Jainism</option>
                                                            <option value="Juche">Juche</option>
                                                            <option value="Judaism">Judaism</option>
                                                            <option value="Neo-Paganism">Neo-Paganism</option>
                                                            <option value="Nonreligious">Nonreligious</option>
                                                            <option value="Rastafarianism">Rastafarianism</option>
                                                            <option value="Secular">Secular</option>
                                                            <option value="Shinto">Shinto</option>
                                                            <option value="Sikhism">Sikhism</option>
                                                            <option value="Spiritism">Spiritism</option>
                                                            <option value="Tenrikyo">Tenrikyo</option>
                                                            <option value="Unitarian-Universalism">Unitarian-Universalism</option>
                                                            <option value="Zoroastrianism">Zoroastrianism</option>
                                                            <option value="primal-indigenous">primal-indigenous</option>
                                                            <option value="Other">Other</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="clearfix"></div>
                                        </div>
                                        <div class="tab-pane" id="address">
                                            <div class="content-left-personal">
                                                <div class="form-group">
                                                    <label for="txtHomeNumber" class="col-md-3 control-label" placeholder="Home #">Home #</label>
                                                    <div class="col-sm-7">
                                                        <input id="txtHomeNumber" class="form-control" maxlength="50" data-ng-model="AppForm.HomeNumber" />
                                                    </div>
                                                    <label for="txtStreet" class="col-md-3 control-label">Street</label>
                                                    <div class="col-sm-7">
                                                        <input id="txtStreet" class="form-control" maxlength="50" data-ng-model="AppForm.Street" placeholder="Street" />
                                                    </div>
                                                    <label for="txtCity" class="col-md-3 control-label">City</label>
                                                    <div class="col-sm-7">
                                                        <input id="txtCity" class="form-control" maxlength="50" data-ng-model="AppForm.City" placeholder="City" />
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="content-right-personal">
                                                <div class="form-group">
                                                    <label for="txtSubdivision" class="col-md-3 control-label">Subdivision</label>
                                                    <div class="col-sm-7">
                                                        <input id="txtSubdivision" class="form-control" maxlength="50" data-ng-model="AppForm.Subdivision" placeholder="Subdivision" />
                                                    </div>
                                                    <label for="txtBarangay" class="col-md-3 control-label">Barangay</label>
                                                    <div class="col-sm-7">
                                                        <input id="txtBarangay" class="form-control" maxlength="50" data-ng-model="AppForm.Barangay" placeholder="Barangay" />
                                                    </div>
                                                    <label for="txtProvince" class="col-md-3 control-label">Province</label>
                                                    <div class="col-sm-7">
                                                        <input id="txtProvince" class="form-control" maxlength="50" data-ng-model="AppForm.Province" placeholder="Province" />
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="clearfix"></div>
                                        </div>
                                        <div class="tab-pane" id="parents">
                                            <div>
                                                <div class="content-left-personal">
                                                    <h4>Father</h4>
                                                    <div class="form-group">
                                                        <label for="txtFatherName" class="col-md-3 control-label">Name</label>
                                                        <div class="col-sm-7">
                                                            <input id="txtFatherName" class="form-control" maxlength="50" ng-model="AppForm.FatherName" />
                                                        </div>
                                                        <label for="txtFatherOccupation" class="col-md-3 control-label">Occupation</label>
                                                        <div class="col-sm-7">
                                                            <input id="txtFatherOccupation" class="form-control" maxlength="50" ng-model="AppForm.FatherOccupation" />
                                                        </div>
                                                        <label for="txtFatherEmail" class="col-md-3 control-label">Email</label>
                                                        <div class="col-sm-7">
                                                            <input id="txtFatherEmail" class="form-control" maxlength="50" ng-model="AppForm.FatherEmail" />
                                                        </div>
                                                        <label for="txtFatherTeleponeNumber" class="col-md-3 control-label">Telepone No.</label>
                                                        <div class="col-sm-7">
                                                            <input id="txtFatherTeleponeNumber" class="form-control" maxlength="50" ng-model="AppForm.FatherTeleponeNumber" />
                                                        </div>
                                                        <label for="txtFatherMobileNumber" class="col-md-3 control-label">Mobile Number</label>
                                                        <div class="col-sm-7">
                                                            <input id="txtFatherMobileNumber" class="form-control" maxlength="50" ng-model="AppForm.FatherMobileNumber" />
                                                        </div>
                                                        <label for="txtFatherAddress" class="col-md-3 control-label" style="left: -124px;">Address</label>
                                                        <div class="col-sm-7" style="left: 125px; top: -25px;">
                                                            <textarea id="txtFatherAddress" class="form-control" ng-model="AppForm.FatherAddress" rows="3" style="width: 262px;"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="content-right-personal">
                                                    <h4>Mother</h4>
                                                    <div class="form-group">
                                                        <label for="txtMotherName" class="col-md-3 control-label">Name</label>
                                                        <div class="col-sm-7">
                                                            <input id="txtMotherName" class="form-control" maxlength="50" ng-model="AppForm.MotherName" />
                                                        </div>
                                                        <label for="txtMotherOccupation" class="col-md-3 control-label">Occupation</label>
                                                        <div class="col-sm-7">
                                                            <input id="txtMotherOccupation" class="form-control" maxlength="50" ng-model="AppForm.MotherOccupation" />
                                                        </div>
                                                        <label for="txtMotherEmail" class="col-md-3 control-label">Email</label>
                                                        <div class="col-sm-7">
                                                            <input id="txtMotherEmail" class="form-control" maxlength="50" ng-model="AppForm.MotherEmail" />
                                                        </div>
                                                        <label for="txtMotherTeleponeNumber" class="col-md-3 control-label">Telepone No.</label>
                                                        <div class="col-sm-7">
                                                            <input id="txtMotherTeleponeNumber" class="form-control" maxlength="50" ng-model="AppForm.MotherTeleponeNumber" />
                                                        </div>
                                                        <label for="txtMotherMobileNumber" class="col-md-3 control-label" style="left: -125px;">Mobile Number</label>
                                                        <div class="col-sm-7" style="left: 106px; top: -45px;">
                                                            <input id="txtMotherMobileNumber" class="form-control" maxlength="50" ng-model="AppForm.MotherMobileNumber" />
                                                        </div>
                                                        <label for="txtMotherAddress" class="col-md-3 control-label" style="left: -250px;">Address</label>
                                                        <div class="col-sm-7" style="left: 107px; top: -44px;">
                                                            <textarea id="txtMotherAddress" class="form-control" ng-model="AppForm.MotherAddress" rows="3"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="clearfix"></div>
                                        </div>

                                        <div class="tab-pane" id="guardian">
                                            <div>
                                                <div class="content-left-personal">
                                                    <h4>Guardian</h4>
                                                    <div class="form-group">
                                                        <label for="txtGuardianName" class="col-md-3 control-label">Name</label>
                                                        <div class="col-sm-7">
                                                            <input id="txtGuardianName" class="form-control" maxlength="50" ng-model="AppForm.GuardianName" />
                                                        </div>
                                                        <label for="txtGuardianOccupation" class="col-md-3 control-label">Occupation</label>
                                                        <div class="col-sm-7">
                                                            <input id="txtGuardianOccupation" class="form-control" maxlength="50" ng-model="AppForm.GuardianOccupation" />
                                                        </div>
                                                        <label for="txtGuardianEmail" class="col-md-3 control-label">Email</label>
                                                        <div class="col-sm-7">
                                                            <input id="txtGuardianEmail" class="form-control" maxlength="50" ng-model="AppForm.GuardianEmail" />
                                                        </div>
                                                        <label for="txtGuardianTeleponeNumber" class="col-md-3 control-label">Telepone No.</label>
                                                        <div class="col-sm-7">
                                                            <input id="txtGuardianTeleponeNumber" class="form-control" maxlength="50" ng-model="AppForm.GuardianTeleponeNumber" />
                                                        </div>
                                                        <label for="txtGuardianMobileNumber" class="col-md-3 control-label">Mobile Number</label>
                                                        <div class="col-sm-7">
                                                            <input id="txtGuardianMobileNumber" class="form-control" maxlength="50" ng-model="AppForm.GuardianMobileNumber" />
                                                        </div>
                                                        <label for="txtGuardianAddress" class="col-md-3 control-label" style="left: -124px;">Address</label>
                                                        <div class="col-sm-7" style="left: 125px; top: -25px;">
                                                            <textarea id="txtGuardianAddress" class="form-control" ng-model="AppForm.GuardianAddress" rows="3" style="width: 262px;"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="clearfix"></div>
                                        </div>
                                        <div class="tab-pane" id="school">
                                            <div>
                                                <div class="content-left-personal">
                                                    <div class="form-group">
                                                        <label for="txtPreviousSchool" class="col-md-3 control-label">Previous School</label>
                                                        <div class="col-sm-7">
                                                            <textarea id="txtPreviousSchool" class="form-control" ng-model="AppForm.PreviousSchool" rows="3" style="width: 262px;"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="clearfix"></div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer" style="padding-top: 7px;">
                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-10">
                                        <span data-ng-hide="editMode">
                                            <!--ng-disabled="addform.$invalid"-->
                                            <input type="submit" value="Add" data-ng-click="RegistrationForms_Add()" class="btn btn-primary" />
                                        </span>
                                        <span data-ng-show="editMode">
                                            <input type="submit" value="Update" data-ng-click="RegistrationForms_Update()" class="btn btn-primary" />
                                        </span>
                                        <input type="button" value="Cancel" data-ng-click="RegistrationForms_Cancel()" class="btn btn-primary" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade" id="confirmOldNewModal" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
                                <h4 class="modal-title" id="H1">Confirm Action</h4>
                            </div>
                            <div class="modal-body">
                                <form class="form-horizontal" role="form" name="addform">
                                    <div class="form-group">
                                        <label for="ddlSelectType" class="col-md-5 control-label">Please select Type of Student:</label>
                                        <div class="col-sm-7">
                                            <select id="ddlSelectType" runat="server" class="form-control" style="width: 150px;" ng-model="RegForm.Type"
                                                ng-options="option for option in listOfOptions" ng-change="ddlSelectType_selectedItemChanged()" required>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="checkbox" ng-show="RegForm.ShowNewEntryForOld" style="margin-left: 264px;">
                                            <label>
                                                <input id="chkNewEntryForOld" type="checkbox" value="false" ng-model="RegForm.NewEntryForOldValue" ng-checked ="RegForm.NewEntryForOldValue" 
                                                    ng-change="chkNewEntryForOld_selectedItemChanged()">New Entry for Old Student?
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group" ng-show="RegForm.ShowSearchBox">
                                        <label for="txtSearchBox" class="col-md-3 control-label">Search for:</label>
                                        <div class="col-sm-7">
                                            <input id="txtSearchBox" class="form-control" maxlength="50" ng-model="RegForm.SearchKey" placeholder="Reference Number or Last Name" />
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-ng-click="RegistrationForms_ShowAdd()">Ok</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal" data-ng-click="RegistrationForms_CancelOldNewModal()">Cancel</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
                                <h4 class="modal-title" id="regFormModalLabel">Confirm Action</h4>
                            </div>
                            <div class="modal-body">
                                Are you sure to delete?
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-ng-click="RegistrationForms_Delete()">Ok</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
